<template>
	<div>
		姓氏 <input type="text" v-model="xing"> <br>
		名字 <input type="text" v-model="ming"> <br>
		全名 <input type="text"> <br>
		{{ xing[0].toUpperCase() + xing.slice(1) + ming }} <br>
		不能改变的 {{ c }} <br>
		能改变的 {{ quan }}
		能改变的 {{ quan }}
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

let xing = ref("wang")
let ming = ref("")
// 计算属性,根据已有的属性的变化,形成一个新的属性 
let c = xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
//  计算属性的名字, 对象|函数,会将结果缓存起来,多次调用 ,函数只执行一次
// 依赖的变量,发生改变,就会调用,
let quan = computed(() => {
	console.log(11111);
	return xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
})




</script>

<style  scoped></style>